<template>
	<view :style="{ paddingTop: safeAreaInsets.top + 10 + 'px' }">
		<image class="logo" src="@/static/images/logo1.png" mode=""></image>
	</view>
	<view class="banner-box">
		<swiper class="banner" :circular="true" :autoplay="true" :interval="5000">
			<swiper-item v-for="item in list" :key="item.id" >
				<image mode="aspectFill" class="img" :src="item.url"></image>
			</swiper-item>
		</swiper>
		<view class="banner-box-btn" @click="clickJump('/pages/custom/custom', 1)">立即定制</view>
	</view>
	
	
	<view class="main1">
		<view class="main1-l">
			<image class="img" src="@/static/images/icon1.png" mode=""></image>
			<view>
				<view class="txt">109项专利</view>
				<view class="txt">和工艺应用</view>
			</view>
		</view>
		<view class="main1-r" @click="clickJump('/pages/product/product', 1)">
			<view class="txt">查看</view>
			<uni-icons class="allow" color="#333" size="12" type="right" />
		</view>
	</view>
	
	<view class="main2">
		<image class="img" src="@/static/images/icon2.png" mode=""></image>
		<view class="txt">拒绝任何来源不明，不合规原料</view>
		<image class="img" src="@/static/images/icon3.png" mode=""></image>
	</view>
	
</template>

<script setup>
	import { ref } from 'vue'
	// 获取手机头部到内容的安全距离
	let { safeAreaInsets } = uni.getSystemInfoSync()
	
	let list  = ref([
		{
			id: 1,
			url: 'https://build.gzwhir.com/zygzmr202410252905/appImages/banner1.jpg'
		},
		{
			id: 2,
			url: 'https://build.gzwhir.com/zygzmr202410252905/appImages/banner2.jpg'
		}
	])
	let clickJump = (url, num) => {
		if(num == 1){
			uni.switchTab({
				url: url
			})
		}else{
			uni.navigateTo({
				url: url
			})
		}
	}
	
</script>

<style lang="scss">
page{
	padding-bottom: 50rpx;
}
.logo{
	width: 205rpx;
	height: 40rpx;
	margin-left: 40rpx;
	padding-bottom: 20rpx;
}

.banner-box{
	position: relative;
	.banner{
		width: 750rpx;
		height: 1470rpx;
		
		.img{
			width: 750rpx;
			height: 1470rpx;
		}
	}
	.banner-box-btn{
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		bottom: 12%;
		width: 90%;
		height: 90rpx;
		border-radius: 90px;
		background: #aae9f2;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 28rpx;
		color: #333;
		font-weight: 500;
	}
}


.main1{
	background: #fff;
	border-radius: 10rpx;
	width: 670rpx;
	height: 160rpx;
	box-sizing: border-box;
	padding: 0 30rpx;
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	
	.main1-l{
		display: flex;
		align-items: center;
		justify-content: space-between;
		
		.img{
			width: 58rpx;
			height: 63rpx;
			margin-right: 30rpx;
		}
		.txt{
			font-size: 28rpx;
			color: #333;
		}
	}
	.main1-r{
		background: #aae9f2;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 130rpx;
		height: 64rpx;
		border-radius: 30px;
		
		.txt{
			font-size: 24rpx;
			color: #333;
			margin-right: 8rpx;
		}
		.allow{
			margin-top: -8rpx;
		}
	}
}

.main2{
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 70rpx;
	
	.img{
		width: 45rpx;
		height: 24rpx;
	}
	.txt{
		font-size: 32rpx;
		color: #333;
		margin: 0 20rpx;
	}
}




</style>
